
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-fanhui"></i>
                    <div class="name">返回</div>
                    <div class="fontclass">.icon-fanhui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianhua"></i>
                    <div class="name">电话</div>
                    <div class="fontclass">.icon-dianhua</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiayongdianqi"></i>
                    <div class="name">家用电器</div>
                    <div class="fontclass">.icon-jiayongdianqi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youxiang"></i>
                    <div class="name">邮箱</div>
                    <div class="fontclass">.icon-youxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mingcheng"></i>
                    <div class="name">名称</div>
                    <div class="fontclass">.icon-mingcheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gerenzhongxin"></i>
                    <div class="name">个人中心</div>
                    <div class="fontclass">.icon-gerenzhongxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fuwu"></i>
                    <div class="name">服务</div>
                    <div class="fontclass">.icon-fuwu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yingyongliebiaoxinzengyonghuxiao"></i>
                    <div class="name">应用列表-新增用户（小）</div>
                    <div class="fontclass">.icon-yingyongliebiaoxinzengyonghuxiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shenghuo"></i>
                    <div class="name">生活</div>
                    <div class="fontclass">.icon-shenghuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shijian"></i>
                    <div class="name">时间</div>
                    <div class="fontclass">.icon-shijian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gouwu"></i>
                    <div class="name">购物</div>
                    <div class="fontclass">.icon-gouwu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-home"></i>
                    <div class="name">主页</div>
                    <div class="fontclass">.icon-home</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingdan"></i>
                    <div class="name">订单</div>
                    <div class="fontclass">.icon-dingdan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-denglu"></i>
                    <div class="name">登录</div>
                    <div class="fontclass">.icon-denglu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lajitong"></i>
                    <div class="name">垃圾桶</div>
                    <div class="fontclass">.icon-lajitong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duihao"></i>
                    <div class="name">对号</div>
                    <div class="fontclass">.icon-duihao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weizhi"></i>
                    <div class="name">位置</div>
                    <div class="fontclass">.icon-weizhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-baojifuben2"></i>
                    <div class="name">家电维修</div>
                    <div class="fontclass">.icon-baojifuben2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiantouxia"></i>
                    <div class="name">箭头-下</div>
                    <div class="fontclass">.icon-jiantouxia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiaoxi"></i>
                    <div class="name">消息</div>
                    <div class="fontclass">.icon-xiaoxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weizhi1"></i>
                    <div class="name">位置</div>
                    <div class="fontclass">.icon-weizhi1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-baojifuben"></i>
                    <div class="name">洗衣new</div>
                    <div class="fontclass">.icon-baojifuben</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shezhi"></i>
                    <div class="name">设置</div>
                    <div class="fontclass">.icon-shezhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhuanxiangeps"></i>
                    <div class="name">miaojie_专享</div>
                    <div class="fontclass">.icon-zhuanxiangeps</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-geren"></i>
                    <div class="name">个人</div>
                    <div class="fontclass">.icon-geren</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yaochi"></i>
                    <div class="name">钥匙</div>
                    <div class="fontclass">.icon-yaochi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wodedingdan"></i>
                    <div class="name">我的订单</div>
                    <div class="fontclass">.icon-wodedingdan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shenghuo1"></i>
                    <div class="name">生活</div>
                    <div class="fontclass">.icon-shenghuo1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shanghu"></i>
                    <div class="name">商户</div>
                    <div class="fontclass">.icon-shanghu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mima"></i>
                    <div class="name">密码</div>
                    <div class="fontclass">.icon-mima</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gouwu1"></i>
                    <div class="name">购物</div>
                    <div class="fontclass">.icon-gouwu1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangcheng"></i>
                    <div class="name">商城</div>
                    <div class="fontclass">.icon-shangcheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-baojie"></i>
                    <div class="name">保洁</div>
                    <div class="fontclass">.icon-baojie</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ershouwupin"></i>
                    <div class="name">二手物品</div>
                    <div class="fontclass">.icon-ershouwupin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiantou"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-jiantou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-nan"></i>
                    <div class="name">男</div>
                    <div class="fontclass">.icon-nan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-nv"></i>
                    <div class="name">女</div>
                    <div class="fontclass">.icon-nv</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jine"></i>
                    <div class="name">金额</div>
                    <div class="fontclass">.icon-jine</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gonggao"></i>
                    <div class="name">公告</div>
                    <div class="fontclass">.icon-gonggao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-geren1"></i>
                    <div class="name">个人</div>
                    <div class="fontclass">.icon-geren1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-x1"></i>
                    <div class="name">x</div>
                    <div class="fontclass">.icon-x1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-x"></i>
                    <div class="name">x</div>
                    <div class="fontclass">.icon-x</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dian"></i>
                    <div class="name">电</div>
                    <div class="fontclass">.icon-dian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-linshibaoji"></i>
                    <div class="name">临时保洁</div>
                    <div class="fontclass">.icon-linshibaoji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sport"></i>
                    <div class="name">跑步</div>
                    <div class="fontclass">.icon-sport</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhuangxiu"></i>
                    <div class="name">装修</div>
                    <div class="fontclass">.icon-zhuangxiu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shuidianmei3"></i>
                    <div class="name">水电煤－3</div>
                    <div class="fontclass">.icon-shuidianmei3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fengkuang"></i>
                    <div class="name">抢单</div>
                    <div class="fontclass">.icon-fengkuang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-haoyou"></i>
                    <div class="name">好友</div>
                    <div class="fontclass">.icon-haoyou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dian1"></i>
                    <div class="name">水电路改造</div>
                    <div class="fontclass">.icon-dian1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-202"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-202</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiaofei"></i>
                    <div class="name">缴费</div>
                    <div class="fontclass">.icon-jiaofei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yanglao"></i>
                    <div class="name">养老</div>
                    <div class="fontclass">.icon-yanglao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duihao1"></i>
                    <div class="name">对号</div>
                    <div class="fontclass">.icon-duihao1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duliweishengjian"></i>
                    <div class="name">独立卫生间</div>
                    <div class="fontclass">.icon-duliweishengjian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon1"></i>
                    <div class="name">维修</div>
                    <div class="fontclass">.icon-icon1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-baojifuwu"></i>
                    <div class="name">保洁服务</div>
                    <div class="fontclass">.icon-baojifuwu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiugai"></i>
                    <div class="name">修改</div>
                    <div class="fontclass">.icon-xiugai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yanzhengma"></i>
                    <div class="name">验证码</div>
                    <div class="fontclass">.icon-yanzhengma</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiaofeijilu"></i>
                    <div class="name">就医记录_缴费记录</div>
                    <div class="fontclass">.icon-jiaofeijilu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-leimu"></i>
                    <div class="name">类目</div>
                    <div class="fontclass">.icon-leimu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhoubiankehu"></i>
                    <div class="name">周边客户</div>
                    <div class="fontclass">.icon-zhoubiankehu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiaoqugonggao01"></i>
                    <div class="name">小区公告</div>
                    <div class="fontclass">.icon-xiaoqugonggao01</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-baomu2"></i>
                    <div class="name">保姆 2</div>
                    <div class="fontclass">.icon-baomu2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-falv"></i>
                    <div class="name">法律</div>
                    <div class="fontclass">.icon-falv</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qiangdan"></i>
                    <div class="name">抢单</div>
                    <div class="fontclass">.icon-qiangdan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianhua1"></i>
                    <div class="name">电话</div>
                    <div class="fontclass">.icon-dianhua1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-denglu1"></i>
                    <div class="name">登录</div>
                    <div class="fontclass">.icon-denglu1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yiqueren"></i>
                    <div class="name">已确认</div>
                    <div class="fontclass">.icon-yiqueren</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-filter"></i>
                    <div class="name">筛选</div>
                    <div class="fontclass">.icon-filter</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wujiaoxing-copy"></i>
                    <div class="name">五角星</div>
                    <div class="fontclass">.icon-wujiaoxing-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-riqi"></i>
                    <div class="name">日期</div>
                    <div class="fontclass">.icon-riqi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wuyefeiyongchuzhang"></i>
                    <div class="name">物业费用出账</div>
                    <div class="fontclass">.icon-wuyefeiyongchuzhang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shui"></i>
                    <div class="name">水</div>
                    <div class="fontclass">.icon-shui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shoujihao"></i>
                    <div class="name">手机号</div>
                    <div class="fontclass">.icon-shoujihao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jigou"></i>
                    <div class="name">机构</div>
                    <div class="fontclass">.icon-jigou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gouwudai"></i>
                    <div class="name">购物袋</div>
                    <div class="fontclass">.icon-gouwudai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tubiao208"></i>
                    <div class="name">投诉</div>
                    <div class="fontclass">.icon-tubiao208</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-leixing"></i>
                    <div class="name">类型</div>
                    <div class="fontclass">.icon-leixing</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
